<template>
    <div class="container" :style="theme">
        <div class="topBox">
            <div>
                <p>大会员特权</p>
                <p class="selBox">
                    <span><img src="../../assets/icon/yinshi.png"/>热剧抢先看</span>
                    <span><img src="../../assets/icon/Free.png" />会员免费看</span>
                    <span><img src="../../assets/icon/hdr.png"/>4K超清画质</span>
                    <span><img src="../../assets/icon/zhuangban.png"/>会员专属装扮</span>
                </p>
            </div>
            <div>
                <p ref="qrcodeRef"></p>
                <p><img src="../../assets/icon/ZWSIcon.png" style="width: 30px;height: 100%;"/></p>
            </div>
        </div>
        <div class="bottomBox">
            <div>
                <span>您的大会员已过期</span>
                <span>由于接口做了防盗保护 二维码的数据是写死的 可能用不了</span>
            </div>
            <div>
                <el-button color="#ff6699" class="button" >成为大会员</el-button>
                <span class="btnLable">限时优惠</span>
            </div>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { ref,Ref } from 'vue'
import QRCode from 'qrcodejs2-fix'
import { getThemes,resType } from '@/hooks/theme'
import { useRouter } from 'vue-router'

const qrcodeRef = ref()
const router = useRouter()
let theme: Ref<resType> = ref(getThemes(router.currentRoute.value.name as string))

function getQRCode(){
    new QRCode(qrcodeRef.value,{
            text: 'https://big.bilibili.com/mobile/payMiddleWare?type=0\u0026token=45944139230806130933', //二维码内容字符串
            width: 100,
            height: 106,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.L,
        })
}
defineExpose({
    getQRCode
})
</script>

<style lang="scss" scoped>
$sysPopoverBackground: var(--backgroundColor);
$sysPopoverLableColor: var(--lableColor);
$sysPopoverTitleColor: var(--titleColor);
$sysPopoverHoverLableColor: var(--hoverLableColor);
$sysPopoverVipBackground:var(--vipBlackground);
p{
    padding: 0;
    margin: 0;
}
.container{
    padding: 20px;
    box-sizing: border-box;
    height: 210px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.topBox{
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    display: flex;
    & div:nth-child(1){
        width: 62%;
    }
    & div:nth-child(1) p:nth-child(1){
        font-weight: 600;
        font-size: 18px;
        line-height: 18px;
        color: $sysPopoverTitleColor;
        cursor: pointer;
    }
    & div:nth-child(1) p:nth-child(1):hover{
        color: #e84393;
    }
    & div:nth-child(2){
        display: flex;
        justify-content: space-around;
        background-color: #F6F7F8;
        padding: 0 2%;
        border-radius: 4px;
        align-items: center;
        width: 34%;
    }
}
.selBox{
    width: 100%;
    margin-top: 10px;
    height: 92px;
    display: grid;
    grid-template-columns: repeat(2,50%);
    grid-template-rows: repeat(2,50%);
    box-sizing: border-box;
    & span{
        color: $sysPopoverTitleColor;
        white-space: nowrap;
        display: flex;
        align-items: center;
        border-radius: 4px;
        transition: all .3s;
        cursor: pointer;
    }
    & span img{
        width: 18%;
        height: 45%;
        margin-right: 5px;
    }
    & span:hover{
        color: #e84393;
        background-color: $sysPopoverHoverLableColor;
    }
}
.bottomBox{
    margin-top: 10px;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    padding: 0 10px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    background-color: $sysPopoverVipBackground;
    & div:nth-child(1){
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #e84393;
    }
    & div:nth-child(1) span:nth-child(1){
        font-size: 16px;
    }
    & div:nth-child(1) span:nth-child(2){
        font-size: 13px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    & div:nth-child(2){
        position: relative;
    }
}
.button{
    color: azure;
    font-size: 16px;
    width: 120px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    background-color:#ff6699;
}
.btnLable{
    padding: 2px 5px;
    border-radius:2px ;
    height: 14px;
    display: flex;
    align-items: center;
    font-size: 14px;
    position: absolute;
    top: -7px;
    right: 0;
    background-color: #FFEEC9;
    color: #5B2E00;
}

.el-button:hover {
    background-color:#ff6699 !important;
    color: azure!important;
}
</style>